<template>
  <up-popup :show="show" mode="bottom" :round="10" :custom-style="{ height: '50vh' }" @close="close">
    <view class="h-full flex flex-col">
      <view class="mb-10rpx w-full flex justify-center flex-shrink-0" @click="close">
        <view class="h-10rpx w-30rpx rounded-full bg-[#ddd]" />
      </view>
      <view class="filter-content p-30rpx pt-20rpx pb-0 flex-1 flex flex-col overflow-hidden">
        <view class="mb-16rpx flex items-center flex-shrink-0">
          <view class="mr-10rpx h-32rpx w-6rpx rounded-2rpx bg-[#07c160]" />
          <text class="text-32rpx text-[#333] font-bold">
            {{ title }}
          </text>
        </view>
        <view class="mb-15rpx box-border h-44px w-full flex flex-shrink-0">
          <input
            v-model="searchKeyword"
            class="box-border h-44px flex-1 border border-[rgba(229,229,229,1)] rounded-5px bg-[rgba(242,247,255,1)] px-10px text-14px opacity-100"
            :placeholder="inputPlaceholder" clearable
          >
          <button
            class="ml-10rpx h-44px w-120rpx flex items-center justify-center rounded-5px bg-[#07c160] text-14px text-white"
            @click="confirmSearch"
          >
            确定
          </button>
        </view>
        <view class="mt-10rpx flex-1 overflow-y-auto">
          <view
            v-for="(item, index) in filteredList" :key="index"
            class="border-b border-[#f0f0f0] px-0 py-24rpx text-center text-32rpx text-[#333]"
            @click="selectItem(item)"
          >
            {{ item?.name || "" }}
          </view>
          <view class="border-t border-[#f0f0f0] py-30rpx text-center text-28rpx text-[#999] bg-[#fafafa]">
            {{ isBatchSearch ? '暂无项目，可在上方输入框写入' : '已经到底了' }}
          </view>
        </view>
      </view>
    </view>
  </up-popup>
</template>

<script setup lang="ts">
import { computed, defineEmits, defineProps, ref, watch } from 'vue';
import { addFeiyongxiangData } from '@/api/statistics';

interface ListItem {
  name: string;
  phone: string;
  [key: string]: any;
}

const props = defineProps({
  show: Boolean,
  title: String,
  inputPlaceholder: String,
  type: Number,
  list: {
    type: Array as () => ListItem[],
    default: () => [],
  },
});

const emit = defineEmits(['update:show', 'item-select', 'search']);

const searchKeyword = ref('');
const filteredList = ref<ListItem[]>(props.list || []);

// 判断是否是批次搜索
const isBatchSearch = computed(() => props.title?.includes('批次'));

function close() {
  emit('update:show', false);
}

function selectItem(item: ListItem) {
  console.log(item);
  emit('item-select', item);
  close();
}

function searchBuyer() {
  // 触发父组件的搜索事件，传递关键词
  emit('search', searchKeyword.value);
}

async function confirmSearch() {
  const res = await addFeiyongxiangData({
    name: searchKeyword.value,
    type: props.type,
  });
  selectItem(res.data);
}

// 监听搜索关键词变化，自动触发搜索
watch(searchKeyword, (val: string) => {
  searchBuyer();
});

// 当列表数据变化时更新过滤后的列表
watch(
  () => props.list,
  (newList) => {
    filteredList.value = newList || [];
  },
  { immediate: true },
);
</script>
